<template>
  <div class="theme-toggle" @click="toggleTheme">
    <i :class="isDarkMode ? 'fas fa-sun' : 'fas fa-moon'"></i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDarkMode: false
    }
  },
  methods: {
    toggleTheme() {
      this.isDarkMode = !this.isDarkMode
      document.body.classList.toggle('dark-mode', this.isDarkMode)
      localStorage.setItem('darkMode', this.isDarkMode ? 'enabled' : 'disabled')
    },
    checkTheme() {
      const savedTheme = localStorage.getItem('darkMode')
      if (savedTheme === 'enabled') {
        this.isDarkMode = true
        document.body.classList.add('dark-mode')
      }
    }
  },
  mounted() {
    this.checkTheme()
  }
}
</script>

<style scoped>
.theme-toggle {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  z-index: 1000;
  transition: all 0.3s;
}

.theme-toggle:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
</style> 